<template>
  <BasicModal
    @register="register"
    title="体验版"
    width="600px"
    :canFullscreen="false"
    @ok="handleOk"
    :confirm-loading="loading"
  >
    <div class="box">
      <div class="title">把草稿库代码添加到以下模板库</div>
      <RadioGroup :value="templateType" @change="handleChange">
        <Radio :value="0">代码支持ext_json全部配置，适用于灵活自定义的模板</Radio>
        <Radio :value="1">代码支持ext_json部分配置，适用于成熟标准化的模板</Radio>
      </RadioGroup>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { RadioGroup, Radio } from 'ant-design-vue';
  import { ref } from 'vue';
  import { addToTemplate } from '@/api/version';
  import { useMessage } from '@/hooks/web/useMessage';

  const id = ref();
  const templateType = ref(0);
  const loading = ref(false);
  const { createMessage } = useMessage();

  const emit = defineEmits(['reload']);

  const [register, { closeModal }] = useModalInner(async (data) => {
    id.value = data.id;
  });

  function handleChange(e) {
    templateType.value = e.target.value;
  }

  async function handleOk() {
    try {
      loading.value = true;
      await addToTemplate(id.value, templateType.value);
      loading.value = false;
      createMessage.success('提交成功！');
      emit('reload');
      closeModal();
    } catch (error) {
      loading.value = false;
    }
  }
</script>

<style lang="less" scoped>
  .box {
    padding: 30px;
    .title {
      margin-bottom: 20px;
    }
  }
</style>
